<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin: 0 auto;
            max-width: 500px;
        }
    </style>
</head>
<body>
    <script>
        const myImage = (() => {
            let imgNode = document.createElement('img');
            document.body.appendChild(imgNode);

            return {
                setSrc(src) {
                    imgNode.src = src;
                }
            }
        })();

        // 虚拟代理
        const proxyImage = (() => {
            let img = new Image();
            img.onload = () => {
                myImage.setSrc(img.src);
            }

            return {
                setSrc(src) {
                    myImage.setSrc('./loading.gif');
                    img.src = src;
                }
            }
        })();

        proxyImage.setSrc('https://images.unsplash.com/photo-1593642703055-4b72c180d9b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
    </script>
</body>
</html>